<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>
  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">北京</a></li>
    <li role="presentation"><a href="#">上海</a></li>
    <li role="presentation"><a href="#">广州</a></li>
  </ul>
  <ul class="nav nav-pills">
  
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
      魏 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>曹操</li>
      <li>司马懿</li>
      <li>曹洪</li>
    </ul>
  </li> 
    <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
      蜀 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>刘备</li>
      <li>关羽</li>
      <li>张飞</li>
    </ul>
  </li>
    <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
      吴 <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>大乔</li>
      <li>小乔</li>
      <li>周瑜</li>
    </ul>      
  </li>
  <li role="presentation"><a href="#">美国</a></li>
</ul>
  
  
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<script type="text/javascript">
	$("li").click(function(){
		$(this).attr("class","active");
		//得到其他li去掉 active
		$(this).siblings().attr("class","");
		
	});
</script>
</html>
 